<template>
    <div>
        <!-- 分配 -->
        <el-dialog
          title="分配订单"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose">
          <el-form :inline="true" :model="carForm" class="demo-form-inline">
              <el-form-item label="司机" style="margin-left: 30px;">
                  <el-select v-model="carForm.driver" placeholder="请选择" @change="getCar()" filterable>
                      <el-option
                        v-for="item in drivers"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="车辆" style="margin-left: 30px;">
                  <el-select v-model="carForm.car" placeholder="请选择" filterable>
                      <el-option
                        v-for="item in cars"
                        :key="item.id"
                        :label="item.number"
                        :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-form> 
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="divide()">确 定</el-button>
          </span>
        </el-dialog>
        <el-table
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="shipperProjectName"
              fixed
              width="200"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="start"
              width="150"
              label="起始地">
            </el-table-column>
            <el-table-column
              prop="end"
              width="150"
              label="目的地">
            </el-table-column>
            <el-table-column
              prop="isCollect"
              width="120"
              label="是否上门提货">
            </el-table-column>
            <el-table-column
              width="180"
              prop="requiredDate"
              label="提货时间">
            </el-table-column>
            <el-table-column
              prop="itemType"
              width="120"
              label="货物类型">
            </el-table-column>
            <el-table-column
              prop="remark"
              width="280"
              label="备注">
            </el-table-column>
            <el-table-column
              prop="shipperLinkMan"
              width="130"
              label="发货方联系人">
            </el-table-column>
            <el-table-column
              prop="shipperPhone"
              width="180"
              label="发货方联系电话">
            </el-table-column>
            <el-table-column
              prop="shippingAddress"
              width="260"
              label="发货地址">
            </el-table-column>
            <el-table-column
              prop="shipperCustomerCode"
              width="150"
              label="客户编码">
            </el-table-column>
            <el-table-column
              prop="consigneeLinkMan"
              width="130"
              label="收货方联系人">
            </el-table-column>
            <el-table-column
              prop="consigneePhone"
              width="180"
              label="收货方联系电话">
            </el-table-column>
            <el-table-column
              prop="deliveryAddress"
              width="260"
              label="收货地址">
            </el-table-column>
            <el-table-column
              prop="name"
              width="130"
              label="分配的司机">
            </el-table-column>
            <el-table-column
              prop="phone"
              width="180"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="exp"
              width="180"
              label="驾照到期时间">
            </el-table-column>
            <el-table-column
              prop="type"
              width="120"
              label="证件类型">
            </el-table-column>
            <el-table-column
              fixed="right"
              width="250"
              label="操作">
              <template slot-scope="scope">
                 <el-button type="text" icon="el-icon-s-grid" @click="openDivide(scope.row)">重新分配</el-button>
                 <el-button type="text" icon="el-icon-view" style="color: #67C23A;" @click="cancel(scope.row.id)">取消分配</el-button>
              </template>   
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 10px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import request from '../../../utils/request.js'
    export default {
        methods:{
            handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            load() {
                request.get("/order/getAllOrderIsAssigned?current=" + this.current + "&size=" + this.size).then(res=>{
                    console.log(res)
                    this.tableData = res.data.records;
                    this.total = res.data.total;                            
                });
                request.get("/driver/getAllDriver").then(res=>{
                    this.drivers = res.data;
                });
            },
            getCar() {
                request.get("/car/getCarListById?id=" + this.carForm.driver).then(res=>{
                    this.cars = res.data;                          
                })
            },
            divide() {
                request.post("/order/divideDriver", this.carForm).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("分配成功");
                    } else {
                        this.$message.error("分配失败");
                    }
                    this.dialogVisible = false;
                    this.load();
                })
            },
            openDivide(val) {
                console.log(val);
                this.dialogVisible = true;
                this.carForm = {};
                this.carForm.baseId = val.id;                
            },
            cancel(id) {
                this.$confirm('请问您是否要取消分配?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    request.post("/order/refuseOrder?id=" + id).then(res=>{
                        if (res.code == 200) {
                            this.$message({
                              type: 'success',
                              message: '取消成功!'
                            });
                            // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                            const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                            this.current = this.current > totalPage ? totalPage : this.current;
                            this.current = this.current < 1 ? 1 : this.current;
                            this.load();
                            location.reload();
                        }
                    })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                    });
                }); 
            }
        },
        mounted() {
            this.load();
        },
        data() {
            return {
                tableData: [],
                current:1,
                size:2,
                total:0,
                drivers: [],
                cars: [],
                carForm: {
                  driver:'',
                  car:'',
                  baseId:''
                },
                dialogVisible:false
            }
        }
    }
</script>

<style>
</style>
